<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>

  <!-- <input type="text" class="search"> -->
</body>

</html>
<script>
  // 「节流throttle」，规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。场景👇

  // scroll滚动事件，每隔特定描述执行回调函数input输入框，每个特定时间发送请求或是展开下拉列表，（防抖也可以）
  // 节流重在加锁「flag = false」

  // 函数节流
  function throttle(fn, delay) {
    // 定义一个标志位flag，用于判断是否可以执行函数
    let flag = true,
      // 定义一个定时器，用于在指定时间后执行函数
      timer = null;
    // 返回一个函数
    return function (...args) {
      // 获取当前上下文
      let context = this;
      // 如果标志位flag为false，则不执行函数
      if (!flag) return;

      // 将标志位flag设置为false
      flag = false;
      // 清除之前的定时器
      clearTimeout(timer);
      // 设置一个新的定时器，在指定时间后执行函数
      timer = setTimeout(function () {
        fn.apply(context, args);
        // 将标志位flag设置为true
        flag = true;
      }, delay);
    };
  }
// ---
// function debounce(fn, wait = 50) {
//         let timer = null;
//         return function () {
//             if (timer) {
//                 clearTimeout(timer)
//             }
//             timer = setTimeout(() => {
//                 fn();
//             }, wait)
//         }
//     }
//     let search = document.querySelector('.search');
//     function showValue () {
//         console.log(search, search.value)
//     }
//     search.oninput = debounce(showValue, 1000)

</script>